/*
 * Copyright (c) 2025 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import { useState, useEffect, useContext } from 'react';
import { Modal, StyleSheet, View, Image, Dimensions, TouchableOpacity } from 'react-native';
import type { FlexStyle } from 'react-native';
import { useBreakpointValue, useHeightBreakpointValue } from '@hadss/react_native_adaptive_layout';
import Video from 'react-native-video';
import { emitter } from '../../EventEmitter';
import type { ActionType } from '../../EventEmitter/types';
import Context from '../../Context';

const CLOSE = require('../../../../../assets/pic/ic_camera_masterai_close.svg');

const Preview = (): JSX.Element => {
  const width = Dimensions.get('window').width;
  const height = Dimensions.get('window').height;
  const [visible, setVisible] = useState<boolean>(false);
  const { path, mediaType } = useContext(Context);

  const handlePreview = (type?: ActionType) : void => {
    if (type === 'preview') {
      setVisible(true);
    }
  };
  const handleClose = (): void => {
    setVisible(false);
  };

  const isSmall = useHeightBreakpointValue<boolean>({
    base: false,
    sm: true,
    md: true,
    lg: false
  });

  const closePosition = useBreakpointValue<FlexStyle>({
    base: isSmall ? {
      top: 16
    } : {
      top: 36
    }
  });

  useEffect(() => {
    emitter.subscribe<ActionType>('camera:action', handlePreview);
    return (): void => {
      emitter.unsubscribe('camera', handlePreview);
    };
  }, []);

  return (
    <Modal
      visible={visible}
      transparent={false}
      animationType="fade"
      onRequestClose={handleClose}
    >
      <View style={style.container}>
        {mediaType === 'photo' ? (
          <Image
            source={path}
            style={{
              width: width,
              height: height,
            }}
            resizeMode={'contain'}
          />
        ) : (
          <Video
            source={path}
            style={{
              width: width,
              height: height,
            }}
            controls
            resizeMode={'contain'}
          />
        )}
        <TouchableOpacity style={[style.close, closePosition]} onPress={handleClose}>
          <Image source={CLOSE} style={{width: 24, height: 24}} />
        </TouchableOpacity>
      </View>
    </Modal>
  );
};

const style = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
    justifyContent: 'center',
    alignItems: 'center',
  },
  close: {
    position: 'absolute',
    right: 22,
    backgroundColor: 'rgba(0,0,0,0.5)',
  }
});

export default Preview;
